<template>
  <div>
    <div id="order_container">
      <div class="order_container_top">
        <div>
          <span>订单号</span>
          <el-input
            v-model="search"
            style="width: 200px"
            placeholder="订单号"
          ></el-input>
        </div>
        <div>
          <span>收货人</span>
          <el-input
            v-model="searchname"
            style="width: 200px"
            placeholder="收货人"
          ></el-input>
        </div>
        <div>
          <span>手机号</span>
          <el-input
            v-model="searchphone"
            style="width: 200px"
            placeholder="手机号"
          ></el-input>
        </div>
        <div>
          <span>订单状态</span>
          <el-input
            v-model="searchstate"
            style="width: 200px"
            placeholder="手机号"
          ></el-input>
        </div>
      </div>

      <div class="dotime">
        <span>选择时间</span>
        <el-date-picker
          v-model="valuetime"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
          size="mini"
        >
        </el-date-picker>

        <el-button
          @click="orderlistbtn"
          class="searBtn"
          type="primary"
          size="mini"
          >查询</el-button
        >
      </div>

      <!-- 订单列表 -->
      <el-table :data="list" style="margin: 20px 0" border>
        <el-table-column label="订单号" prop="orderNo"></el-table-column>
        <el-table-column label="下单时间" prop="orderTime"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="收货人" prop="consignee"></el-table-column>
        <el-table-column
          label="配送地址"
          prop="deliverAddress"
        ></el-table-column>
        <el-table-column label="送达时间" prop="deliveryTime"></el-table-column>
        <el-table-column label="用户备注" prop="remarks"></el-table-column>
        <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
        <el-table-column label="订单状态" prop="orderState"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="order">
            <!-- 显示查询的弹框 -->
            <el-popover placement="right" trigger="click" width="900">
              <el-table :data="detaillist">
                <el-table-column
                  label="订单号"
                  prop="orderNo"
                ></el-table-column>
                <el-table-column
                  label="下单时间"
                  prop="orderTime"
                ></el-table-column>
                <el-table-column label="手机号" prop="phone"></el-table-column>
                <el-table-column
                  label="收货人"
                  prop="consignee"
                ></el-table-column>
                <el-table-column
                  label="配送地址"
                  prop="deliverAddress"
                ></el-table-column>
                <el-table-column
                  label="送达时间"
                  prop="deliveryTime"
                ></el-table-column>
                <el-table-column
                  label="用户备注"
                  prop="remarks"
                ></el-table-column>
                <el-table-column
                  label="订单金额"
                  prop="orderAmount"
                ></el-table-column>
                <el-table-column
                  label="订单状态"
                  prop="orderState"
                ></el-table-column>
              </el-table>
              <el-button
                slot="reference"
                type="text"
                @click="clicklook(order.row)"
                >查看</el-button
              >
            </el-popover>
            <el-button type="text" @click="clickedit(order.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑修改弹窗 -->
      <el-dialog title="修改订单" :visible.sync="dialogchange" width="40%">
        <div class="diainput">
          <span>订单号</span
          ><el-input v-model="novalue" style="width: 400px" disabled />
        </div>
        <div class="diainput">
          <span>下单时间</span
          ><el-date-picker
            v-model="datevalue"
            type="datetime"
            style="width: 400px"
            disabled
          >
          </el-date-picker>
        </div>
        <div class="diainput">
          <span>手机号</span><el-input v-model="phone" style="width: 400px" />
        </div>
        <div class="diainput">
          <span>收货人</span><el-input v-model="consign" style="width: 400px" />
        </div>
        <div class="diainput">
          <span>配送地址</span
          ><el-input v-model="deliver" style="width: 400px" />
        </div>
        <div class="diainput">
          <span>送达时间</span
          ><el-date-picker
            v-model="delivertime"
            type="datetime"
            style="width: 400px"
            disabled
          >
          </el-date-picker>
        </div>
        <div class="diainput">
          <span>用户备注</span
          ><el-input v-model="remarks" style="width: 400px" />
        </div>
        <div class="diainput">
          <span>订单金额</span><el-input v-model="price" style="width: 400px" />
        </div>
        <div class="diainput">
          <span>订单状态</span
          ><el-input v-model="orderState" style="width: 400px" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogchange = false">取 消</el-button>
          <el-button type="primary" @click="dialogtrue">确 定</el-button>
        </span>
      </el-dialog>

      <div class="order_container_page">
        <el-pagination
          @size-change="sizechange"
          @current-change="pagechange"
          :current-page="curpage"
          :page-size="curpagesize"
          :page-sizes="changepagesizes"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { orderlist, orderdetail, orderedit } from "@/apis/items";
export default {
  data() {
    return {
      orderstate: "",
      valuetime: "",

      total: 0,
      curpage: 1,
      curpagesize: 5,
      changepagesizes: [5, 10, 15, 20],

      list: [
        /* consignee: "汪小哥"
        deliverAddress: "天府新谷"
        deliveryTime: "2020-04-16T02:44:58.000Z"
        id: 21
        orderAmount: 30
        orderNo: "16013"
        orderState: "已完成"
        orderTime: "2020-06-04T09:35:19.000Z"
        phone: "18181358998"
        remarks: "不要辣" */
      ],
      detaillist: [],

      dialogchange: false,

      novalue: "", //订单号
      datevalue: "", //下单时间
      phone: "", //手机号
      consign: "", //收获人
      deliver: "", //配送地址
      delivertime: "", //送达时间
      remarks: "", //备注
      price: "", //金额
      orderState: "", //订单状态
      orderid: "", //订单id

      //查询
      search: "",
      searchname: "",
      searchphone: "",
      searchstate: "",
    };
  },

  methods: {
    //数字小于10就+0
    dateNum(num) {
      return num < 10 ? "0" + num : num;
    },
    //获取商品列表函数
    orderdata() {
      orderlist({ currentPage: this.curpage, pageSize: this.curpagesize }).then(
        (res) => {
          // console.log(res);
          //转换时间格式
          for (const obj of res.data.data) {
            let o = new Date(obj.orderTime);
            let d = new Date(obj.deliveryTime);
            obj.orderTime =
              o.getFullYear() +
              "-" +
              this.dateNum(o.getMonth()) +
              "-" +
              this.dateNum(o.getDate()) +
              " " +
              this.dateNum(o.getHours()) +
              ":" +
              this.dateNum(o.getMinutes()) +
              ":" +
              this.dateNum(o.getSeconds());
            obj.deliveryTime =
              d.getFullYear() +
              "-" +
              this.dateNum(d.getMonth()) +
              "-" +
              this.dateNum(d.getDate()) +
              " " +
              this.dateNum(d.getHours()) +
              ":" +
              this.dateNum(d.getMinutes()) +
              ":" +
              this.dateNum(d.getSeconds());
          }
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },

    //查看订单
    clicklook(obj) {
      // console.log(obj);
      this.dialogVisible = true;
      orderdetail({ id: obj.id }).then((res) => {
        console.log(res.data.data);
        this.detaillist = [];

        let o = new Date(res.data.data.orderTime);
        let d = new Date(res.data.data.deliveryTime);
        res.data.data.orderTime =
          o.getFullYear() +
          "-" +
          this.dateNum(o.getMonth()) +
          "-" +
          this.dateNum(o.getDate()) +
          " " +
          this.dateNum(o.getHours()) +
          ":" +
          this.dateNum(o.getMinutes()) +
          ":" +
          this.dateNum(o.getSeconds());
        res.data.data.deliveryTime =
          d.getFullYear() +
          "-" +
          this.dateNum(d.getMonth()) +
          "-" +
          this.dateNum(d.getDate()) +
          " " +
          this.dateNum(o.getHours()) +
          ":" +
          this.dateNum(o.getMinutes()) +
          ":" +
          this.dateNum(o.getSeconds());

        this.detaillist.push(res.data.data);
      });
    },

    //查询订单
    orderlistbtn() {
      orderlist({
        currentPage: this.curpage,
        pageSize: this.curpagesize,
        orderNo: this.search,
        consignee: this.searchname,
        phone: this.searchphone,
        orderState: this.searchstate,
      }).then((res) => {
        this.list = res.data.data;
        // this.orderdata();
        console.log(res);
      });
    },

    //修改订单
    clickedit(obj) {
      console.log(obj);
      this.dialogchange = true;

      this.novalue = obj.orderNo;
      this.datevalue = obj.orderTime;
      this.phone = obj.phone;
      this.consign = obj.consignee;
      this.deliver = obj.deliverAddress;
      this.delivertime = obj.deliveryTime;
      this.remarks = obj.remarks;
      this.price = obj.orderAmount;
      this.orderState = obj.orderState;
      this.orderid = obj.id;
    },

    //保存修改后的信息
    dialogtrue() {
      this.dialogchange = false;
      orderedit({
        id: this.orderid,
        orderNo: this.novalue,
        orderTime: this.datevalue,
        phone: this.phone,
        consignee: this.consign,
        deliverAddress: this.deliver,
        deliveryTime: this.delivertime,
        remarks: this.remarks,
        orderAmount: this.price,
        orderState: this.orderState,
      }).then((res) => {
        if (res.data.code == 0) {
          console.log(res);
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.orderdata();
        }
      });
    },

    //显示条数
    sizechange(newsize) {
      // console.log(newsize);
      this.curpagesize = newsize;
      this.orderdata();
    },

    //跳转页数
    pagechange(newpage) {
      // console.log(newpage);
      this.curpage = newpage;
      this.orderdata();
    },
  },
  created() {
    this.orderdata();
  },
};
</script>

<style lang="less" scoped>
#order_container {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .order_container_top {
    display: flex;
    div {
      display: flex;
      align-items: center;
      margin-right: 10px;
      span {
        margin-right: 10px;
      }
    }
  }
  .dotime {
    margin-top: 20px;
    .searBtn {
      margin-left: 10px;
    }
  }

  .el-dialog {
    .diainput {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 5px 50px;
      span {
        margin-right: 10px;
      }
    }
  }
}
</style>